<html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<header>
    <!-- <meta charset="utf-8"> -->
    <meta charset="utf-8">
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/login.css">

    <!-- 引入 layui.js -->
    <script src="../js/Vue.js"></script>
    <script type="text/javascript" src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/register.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <title>注册页</title>


</header>
<body>
<div>
    <div id="c">

        <div >
            <h2 class="title">用户注册</h2>
        </div>
        <p STYLE="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
        <form class="layui-form" th:action="@{/register}">
        <div class="layui-form-item">
            <label class="layui-form-label">昵称</label>
            <div class="layui-input-inline" id="user">
                <input type="text" name="userName" required lay-verify="required" placeholder="昵称" autocomplete="off"
                       class="layui-input" v-model="x" v-on:blur="checkUseName()">
                <p >{{message}}</p>
            </div>

        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off" class="layui-input">
            </div>
            <p STYLE="color: red" id="pwdError"></p>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码框</label>
            <div class="layui-input-inline">
                <input type="password" name="passwordRequire" required lay-verify="required" placeholder="请输入密码"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <button type="submit" class="layui-btn layui-btn-radius layui-btn-normal submit">提交</button>
        </form>
    </div>
    <img src="../picture/bg.jpg" width="100%" height="100%">
</div>
<script type="text/javascript">

    new Vue({
        el: '#user',
        data() {
            return {
                x: null,
                message: null
            }
        },
        methods: {
            checkUseName() {
                axios.post("http://localhost:8080/checkUserExit",{userName: this.x})
                    .then(response => (this.message = response.data))
                    .catch(function (error) {
                        console.log(error);
                    })
            }
        }
    })
</script>
</body>
</html>